<?php echo $this->Html->script(array('lib/jquery.slug.js','lib/tagit.js'),array('inline'=>false))?>
<?php echo $this->Html->css(array('tagit'),'stylesheet',array('inline'=>false))?>
<div class="span3">
	<h4>
	<?php echo __('Article Information')?>
	</h4>
	<div class="tabbable tabs-left">
		<ul class="nav nav-tabs row-fluid" id="article-tabs">
			<li class="active"><a href="#tabs-main-section" data-toggle="tab"><?php echo __('Article Information')?>
			</a></li>
			<li><a href="#tabs-content-section" data-toggle="tab"> <?php echo __('Content')?>
			</a></li>
			<li><a href="#tabs-meta-section" data-toggle="tab"><?php echo __('Meta Data')?>
			</a></li>
		</ul>
	</div>
</div>
<div class="span9">
	<div class="form-wrap">
	<?php echo $this->Form->create('Article',array('class'=>'form-horizontal','id'=>'article-form'));?>
	<?php echo $this->Form->hidden('id') ?>
	<?php echo $this->Form->hidden('task',array('id'=>'task'))?>
		<div class="toolbar-box clearover">
			<div class="toolbar-title left">
				<h3>
				<?php echo __('Edit Article'); ?>
				</h3>
			</div>
			<div class="toolbar-btn right">
				<a href="<?php echo $this->Html->url(array('action'=>'index')) ?>"
					class="btn btn-small"><i class="icon-circle-arrow-left"></i>&nbsp;<?php echo __('Back') ?>
				</a> <a href="javascript:beforeSubmit('save')"
					class="btn btn-small btn-primary"><i
					class="icon-ok-sign icon-white"></i>&nbsp;<?php echo __('Save') ?>
				</a> <a href="javascript:beforeSubmit('save2new')"
					class="btn btn-small btn-primary"><i
					class="icon-ok-sign icon-white"></i>&nbsp;<?php echo __('Save & New') ?>
				</a>
			</div>
		</div>
		<div class="tab-content">
			<div class="tab-pane active" id="tabs-main-section">
				<div class="category-wrap control-group">
					<label class="control-label"><?php echo __('Category') ?> </label>
					<div class="controls">
					<?php echo $this->Form->select('category_id',$categories,array(
						'empty' => __('Select category'),
						'id' => 'category-select',
					))?>
						<span id="subcatery-wrap"></span>
					</div>
				</div>

				<div class="control-group">
					<label class="control-label"><?php echo __('Title') ?> </label>
					<div class="controls">
					<?php echo $this->Form->input('title',array('id'=>'input-title','class'=>'span6','div'=>false, 'label'=>false)) ?>
					</div>
				</div>

				<div class="control-group">
					<label class="control-label"><?php echo __('Link') ?> </label>
					<div class="controls">
					<?php echo $this->Form->input('link',array('class'=>'input-link span6','div'=>false, 'label'=>false)) ?>
					</div>
				</div>

				<div class="control-group">
					<label class="control-label"><?php echo __('Status') ?> </label>
					<div class="controls">
					<?php $status = array(ARTICLE_STATUS_DRAFT => __('Draft'), ARTICLE_STATUS_POSTED => __('Post'))?>
						<div class="radio">
						<?php
						echo $this->Form->radio('status', $status, array(
							'legend' => false,
							'div' => false,
							'value' => $this->data['Article']['status'],
						));
						?>
						</div>
					</div>
				</div>
			</div><!-- end tab main -->
			
			<div class="tab-pane" id="tabs-content-section">
			<?php echo $this->TinyMce->input('content', array('rows' => 20, 'cols' => 50, 'label'=> false)) ?>
			</div>
			
			<div class="tab-pane" id="tabs-meta-section">
			<?php echo $this->Form->label(__('Keyword')) ?>
			<?php echo $this->Form->hidden('keyword',array('id'=>'keyword-input')) ?>
				<ul id="keyword" name="keyword">
				<?php if(isset($this->data['Article']['keyword']) && !empty($this->data['Article']['keyword'])){
					$keywords = explode(",", $this->data['Article']['keyword']);
					foreach($keywords as $keyword){
						echo '<li>'.$keyword.'</li>';
					}
				}?>
				</ul>

				<?php echo $this->Form->label(__('Tag')) ?>
				<?php echo $this->Form->hidden('tag',array('id'=>'tag-input')) ?>
				<ul id="tag" name="tag">
				<?php if(isset($this->data['Article']['tag']) && !empty($this->data['Article']['tag'])){
					$tags = explode(",", $this->data['Article']['tag']);
					foreach($tags as $tag){
						echo '<li>'.$tag.'</li>';
					}
				}?>
				</ul>
			</div>
			<?php echo $this->Form->end();?>
		</div>
	</div>
</div>
<script type="text/javascript">

	$(document).ready(function(){
		$("#article-tabs").tab();
		
		$("#input-title").slug({
			slug: 'input-link',
			hide: false
		});

		$("#category-select").change(function(){
			if($(this).val()){
				$.ajax({
					url: '<?php echo $this->Html->url(array('controller'=>'categories','action'=>'getSubCategory')) ?>' + '/' + $(this).val(),
					success: function(r){
						$("#subcatery-wrap").html(r);
					}
				});
			}else{
				$("#subcatery-wrap").html("");
			}
			return false;
		});
	});
	var availableTags = [];
	$("#keyword").tagit({tagSource:availableTags, sortable:false, triggerKeys:['enter', 'comma', 'tab']});
	$("#tag").tagit({tagSource:availableTags, sortable:false, triggerKeys:['enter', 'comma', 'tab']});

	function getTags(tags) {
		var str = "";
		for (var i in tags){
			if(str === ""){
			str += tags[i].value;
			}else{
				str += "," + tags[i].value;
			}
		}
		return str;
	}

	function beforeSubmit(task){
		$("#task").val(task);
		$("#keyword-input").val(getTags($("#keyword").tagit('tags')));
		$("#tag-input").val(getTags($("#tag").tagit('tags')));
		$("#article-form").submit();
	}
	
//
</script>
